<template>
    <div class="acc-detail-box" v-loading="loading">
        <topTitle title="基本信息"/>
        <div class="acc-detail-base">
            <div class="base-content">
                <div>
                    <p>QQ号：</p>
                    <p>{{ accountData.accountNo }}</p>
                </div>
                <div>
                    <p>账号状态：</p>
                    <p v-if="accountData.manageStatus === 0">待托管</p>
                    <p v-if="accountData.manageStatus === -1">暂停托管</p>
                    <p v-if="accountData.manageStatus === -2">注销托管</p>
                    <p v-if="accountData.manageStatus === 1">已托管</p>
                </div>
                <div>
                    <p>违规次数：</p>
                    <p>{{ accountData.punishCount || 0 }}</p>
                </div>
                <div>
                    <p>号主趣ID：</p>
                    <p>{{ accountData.userId }}</p>
                </div>
            </div>
            <div class="base-btn">
                <div v-if="accountData.manageStatus === 0">
                    <el-button @click="openDialog(-2)" type="primary">注销托管</el-button>
                    <el-button @click="changeStatus(1)" type="primary">开始托管</el-button>
                </div>
                <div v-if="accountData.manageStatus === 1">
                    <el-button @click="openDialog(-2)" type="primary">注销托管</el-button>
                    <el-button @click="openDialog(-1)" type="primary">暂停托管</el-button>
                </div>
                <div v-if="accountData.manageStatus === -1">
                    <el-button @click="openDialog(-2)" type="primary">注销托管</el-button>
                    <el-button @click="changeStatus(1)" type="primary">开始托管</el-button>
                </div>
                <div v-if="accountData.manageStatus === -2">
                    <el-button @click="changeStatus(1)" type="primary">恢复托管</el-button>
                </div>
            </div>
        </div>
        <div class="acc-detail-tabs">
            <el-tabs v-model="accountTab" type="border-card">
                <el-tab-pane v-for="(item, index) in accountData.quTradeAccountDataDetailDtoList" :key="index" :label="item.serverName" :name="item.serverName" :lazy="true">
                    <accountInfo :item="item"/>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="acc-detail-report">
            <el-tabs v-model="reportTab" type="border-card" :lazy="true">
                <el-tab-pane v-for="(item, index) in reportList" :key="index" :label="item.name" :name="item.name">
                    <accountReport :id="`echarts${index}`" :item="item" />
                </el-tab-pane>
                <el-tab-pane label="订单明细" name="third" :lazy="true">
                    <accountTable />
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog title="操作" :visible.sync="dialogVisible" width="300px">
            <div>
                <p style="margin-bottom: 20px;">暂停/注销理由:</p>
                <el-input type="textarea" maxlength="20" rows="3" style="width:260px;" v-model.trim="reason"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogCancel">取 消</el-button>
                <el-button type="primary" @click="changeStatusPauseOff(digStatus)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import accountInfo from './component/accountInfo'
import accountReport from './component/accountReport'
import accountTable from './component/accountTable'
export default {
    components: {
        accountInfo, accountReport, accountTable
    },
    data () {
        return {
            accountTab: '',
            reportTab: '',
            reason: null,
            digStatus: null,
            accountData: {},
            reportList: [],
            gameList: [],
            categoryList: [],
            loading: false,
            gameLoading: false,
            dialogVisible: false,
            accountId: '',
            userId: ''
        }
    },
    watch: {
    },
    created () {
        const { accountId, userId } = this.$route.query
        this.accountId = accountId
        this.userId = userId
        this.getDetail()
        this.getReport()
    },
    mounted () {
    },
    methods: {
        getDetail () {
            this.loading = true
            const { dataId } = this.$route.query
            let params = {
                accountId: this.accountId,
                userId: this.userId,
                dataId
            }

            const path = dataId ? `trade/accountDetailByDataId` : `/trade/accountDetail`
            this.$http.get(path, { params }).then(res => {
                if (res.code === '0') {
                    this.loading = false
                    this.accountData = res.data
                    this.accountTab = res.data.quTradeAccountDataDetailDtoList[0].serverName
                } else {
                    this.loading = false
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        getReport () {
            this.$http.get('/trade/tradeInfo', { params: { accountNo: this.$route.query.accountId, userId: this.userId } }).then(res => {
                if (res.code === '0') {
                    this.reportList = res.data
                    this.reportTab = res.data[0].name
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        changeStatusPauseOff () {
            if (!this.reason) {
                return this.$message({
                    type: 'warning',
                    message: '请填写暂停/注销理由'
                })
            }
            this.dialogVisible = false
            this.changeStatus(this.digStatus)
            this.reason = null
        },
        openDialog (status) {
            this.dialogVisible = true
            this.digStatus = status
        },
        dialogCancel () {
            this.dialogVisible = false
            this.reason = null
        },
        changeStatus (status) {
            this.$http.post('/trade/updateAccountStatus', {
                accountNo: this.accountData.accountNo,
                userId: this.userId,
                status,
                remark: this.reason
            }).then(res => {
                if (res.code === '0') {
                    this.accountData.manageStatus = status
                    this.$message({
                        type: 'success',
                        message: '状态修改成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            }).catch((err) => {
                this.$message({
                    type: 'error',
                    message: err.desc
                })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .acc-detail-box {
        .acc-detail-base {
            position: relative;
            display: flex;
            margin-bottom: 20px;
            .base-content {
                display: flex;
                color: #333;
                font-size: 14px;
                div {
                    margin-right: 30px;
                }
            }
            .base-btn {
                position: absolute;
                right: 30px;
            }
        }
        .acc-detail-report {
            margin-top: 20px;
            margin-bottom: 50px;
        }
    }
</style>
